import React from 'react';
import { Image } from 'antd';
import styles from './index.less';

/**
 * 图片展示
 * @param {*} url 图片路径 String '1.jpg,2.jpg'
 */

const ImgBlock = ({ url, width = 104, height = 104 }) => (
  <Image
    key={url}
    width={width}
    height={height}
    src={url}
    className={styles.descript_img}
    fallback=""
  />
);

const ImagePreviewGroup = ({ url = '', width = 104, height = 104 }) => {
  // 空数据直接返回
  if (!url) return '';
  // 数据获取
  let fileUrl = url;
  // dom储存 默认单图
  let imgComponent = <ImgBlock width={width} height={height} url={fileUrl}></ImgBlock>;
  // 多图片处理成数组
  if (fileUrl.indexOf(',') > -1) fileUrl = fileUrl.split(',');
  // 若图片数据是数组 遍历
  if (Array.isArray(fileUrl)) {
    imgComponent = fileUrl.map((item) => <ImgBlock width={width} height={height} key={item} url={item}></ImgBlock>);
  }
  // 返回结果
  return <Image.PreviewGroup>{imgComponent}</Image.PreviewGroup>;
};

export default ImagePreviewGroup;
